<template>
  <div class="countdown">
    <span>添加任务</span>
  </div>
  <van-count-down :time="time" />
  <van-count-down :time="time" format="DD 天 HH 时 mm 分 ss 秒" />
  <van-count-down millisecond :time="time" format="HH:mm:ss:SS" />
  <van-count-down :time="time">
    <template #default="timeData">
      <span class="block">{{ timeData.hours }}</span>
      <span class="colon">:</span>
      <span class="block">{{ timeData.minutes }}</span>
      <span class="colon">:</span>
      <span class="block">{{ timeData.seconds }}</span>
    </template>
  </van-count-down>
  //自定义倒计时
  <van-count-down
      ref="countDown"
      millisecond
      :time="15000"
      :auto-start="false"
      format="ss:SSS"
      @finish="onFinish"
  />
  <van-grid clickable>
    <van-grid-item text="开始" icon="play-circle-o" @click="start" />
    <van-grid-item text="暂停" icon="pause-circle-o" @click="pause" />
    <van-grid-item text="重置" icon="replay" @click="reset" />
  </van-grid>

  <div class="container">
    <van-form @submit.prevent="handleSubmit" :show-error="false">
      <!-- 用户ID隐藏输入框 -->
      <input type="hidden" v-model="userId" name="userId">

      <!-- 任务名称 -->
      <van-field
          v-model="taskName"
          name="taskName"
          label="任务名称"
          placeholder="请输入任务名称"
          required
      />

      <!-- 开始日期 -->
      <van-field
          v-model="startDate"
          type="date"
          name="startDate"
          label="开始日期"
          placeholder="请选择开始日期"
          required
      />

      <!-- 结束日期 -->
      <van-field
          v-model="endDate"
          type="date"
          name="endDate"
          label="结束日期"
          placeholder="请选择结束日期"
          required
      />

      <!-- 开始时间 -->
      <van-field
          v-model="startTime"
          type="time"
          name="startTime"
          label="开始时间"
          placeholder="请选择开始时间"
          required
      />

      <!-- 结束时间 -->
      <van-field
          v-model="endTime"
          type="time"
          name="endTime"
          label="结束时间"
          placeholder="请选择结束时间"
          required
      />

      <!-- 提醒时间 -->
      <van-field
          v-model="reminderTime"
          type="time"
          name="reminderTime"
          label="提醒时间"
          placeholder="请选择提醒时间"
          required
      />

      <!-- 打卡时间 -->
      <van-field
          v-model="checkInTime"
          type="time"
          name="checkInTime"
          label="打卡时间"
          placeholder="请选择打卡时间"
          required
      />

      <!-- 重复的星期几（简化处理，仅作示意） -->
      <van-field
          v-model="repeatDays"
          type="text"
          name="repeatDays"
          label="重复的星期几"
          placeholder="例如：[Monday, Tuesday, Wednesday, Thursday , Friday, false, true]"
      />

      <!-- 备注 -->
      <van-field
          v-model="node"
          name="node"
          label="备注"
          placeholder="请输入任务备注（可选）"
      />

      <!-- 提交按钮 -->
      <van-button round block type="primary" @click="handleSubmit">确定</van-button>
      <van-toast id="van-toast" />
    </van-form>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import axios from 'axios'; // 添加这一行导入axios
import { createApp } from 'vue';
import { CountDown } from 'vant';

const app = createApp();
app.use(CountDown);
//倒计时
const time = ref(30 * 60 * 60 * 1000);

const countDown = ref(null);

const start = () => {
  countDown.value.start();
};
const pause = () => {
  countDown.value.pause();
};
const reset = () => {
  countDown.value.reset();
};
const onFinish = () => showToast('倒计时结束');





const router = useRouter();

// 数据绑定
const userId = ref(1); // 示例用户ID
const taskName = ref('');
const startDate = ref(null);
const endDate = ref(null);
const startTime = ref('');
const endTime = ref('');
const reminderTime = ref('');
const checkInTime = ref('');
const repeatDays = ref('Monday'); // 示例值，应根据实际情况调整
const node = ref('');




// 表单提交处理
const handleSubmit = async () => {
  // 构造时间字符串为"HH:mm:ss"格式
  const formattedStartTime = (startTime.value || '00:00') + ':00';
  const formattedEndTime = (endTime.value || '00:00') + ':00';
  const formattedReminderTime = (reminderTime.value || '00:00') + ':00';
  const formattedCheckInTime = (checkInTime.value || '00:00') + ':00';

  // 构造提交的数据对象
  const taskData = {
    userId: userId.value,
    taskName: taskName.value,
    startDate: startDate.value, // 日期保持原样，假设为"YYYY-MM-DD"
    endDate: endDate.value,
    startTime: formattedStartTime,
    endTime: formattedEndTime,
    reminderTime: formattedReminderTime,
    checkInTime: formattedCheckInTime,
    repeatDays: Array.isArray(repeatDays.value) ? repeatDays.value : null,
    node: node.value,
  };

  // 这里应该调用API发送taskData到后端
  console.log('提交的数据:', taskData);
  // const requestData = {
  //   task: this.task,
  //   startDate: this.startDate,
  //   endDate: this.endDate,
  //   time: this.time,
  //   remark: this.remark,
  //   repeatOptions: this.repeatOptions
  // };

  // console.log('发送的请求数据:', taskData);
  // 实际情况下，你需要使用axios或其他HTTP客户端来发送这个数据到服务器
  try {
    const response = await axios.post('http://localhost:9093/api/task/addTask', taskData);
    if (response.status === 200) {
      console.log('任务添加成功');
      // 添加成功后跳转到/home页面
      await router.push('/home');
    } else {
      console.error('添加任务时遇到错误，响应状态码：', response.status);
      // 可以在这里添加错误处理逻辑，如提示用户
    }
  } catch (error) {
    console.error('添加任务时出错:', error);
  }
};
</script>

<style scoped>
/* 根据需要添加样式 */
.colon {
  display: inline-block;
  margin: 0 4px;
  color: #1989fa;
}
.block {
  display: inline-block;
  width: 22px;
  color: #fff;
  font-size: 12px;
  text-align: center;
  background-color: #1989fa;
}
</style>